<script setup>
import { ref } from 'vue'
import { debounce } from 'lodash'
import { signUp,login } from '@/api/login'
import { useLoginPinia } from '@/stores/index'
import { useRouter } from 'vue-router'
import { useMyInformationPinia } from '@/stores/models/useMyInformation'
import { getMyInformation } from '@/api/MyselfApi'
import xuanRanInformation from '@/utils/xuanRanMyInformation'

const myInformationPinia = useMyInformationPinia()
const router = useRouter()

// 控制加载框
const loading = ref(false)

//登录注册界面切换
  // 控制登录还是注册页面的值
  const ifDenglu = ref(true)
  // 改 控制登录还是注册页面的值 的方法
  const updateIfDenglu = () => {
    if(ifDenglu.value){
      ifDenglu.value = false
    }else {
      ifDenglu.value = true
    }
    inputValue.value.username = '',
    inputValue.value.password = '',
    inputValue.value.signUp = '',
    inputValue.value.newPassword = '',
    inputValue.value.ifPassword = '',
    // inputSubmit.value.usernameSubmit = 0,
    // inputSubmit.value.passwordSubmit = 0,
    inputSubmit.value.signUpSubmit = 0,
    inputSubmit.value.newPasswordSubmit = 0,
    inputSubmit.value.ifPasswordSubmit = 0
  }

// -----

// 提示框显示与隐藏
const check = ref({
  usernameCheck: false,
  passwordCheck: false,
  signUpCheck: false,
  newPasswordCheck: false,
  ifPasswordCheck: false
})
// 输入框文本
const inputValue = ref({
  username: '',
  password: '',
  signUp: '',
  newPassword: '',
  ifPassword: ''
})
// 做判断是否符合要求的参
const inputSubmit = ref({
  usernameSubmit: 0,
  passwordSubmit: 0,
  signUpSubmit: 0,
  newPasswordSubmit: 0,
  ifPasswordSubmit:  0
})
// ------

// 校验注册
  // 防抖
  const loginSetTimeout = debounce(
        () => {
          if ( check.value.passwordCheck === true ){
            check.value.passwordCheck = false
            console.log('防抖了')
          }
        },3000)
  const signUpSetTimeout = debounce(
        () => {
          if ( check.value.signUpCheck === true ){
            check.value.signUpCheck = false
            // console.log('防抖了')
          }
        }, 3000) 
  const passwordSetTimeout = debounce(
        () => {
          if ( check.value.newPasswordCheck === true ){
            check.value.newPasswordCheck = false
            // console.log('防抖了')
          }
        },3000)
  const ifpasswordSetTimeout = debounce(
        () => {
          if ( check.value.ifPasswordCheck === true ){
            check.value.ifPasswordCheck = false
            // console.log('防抖了')
          }
        },3000)

  // 校验封装函数    
  const isShowSignUpCheck = () => {
  if (inputValue.value.signUp === ''){
    inputSubmit.value.signUpSubmit = 0
    return
  }else if (inputValue.value.signUp.length >10){
    document.querySelector('.signUp-check').innerHTML = '用户名最多10位数'
    check.value.signUpCheck = true
    signUpSetTimeout()
    inputSubmit.value.signUpSubmit = 0
    return  
  }else if (!/^[a-zA-Z0-9-_]+$/g.test(inputValue.value.signUp)){
    document.querySelector('.signUp-check').innerHTML = '非法字符'
    check.value.signUpCheck = true
    signUpSetTimeout()
    inputSubmit.value.signUpSubmit = 0
    return 
  }
  inputSubmit.value.signUpSubmit = 1
  }
  const isShowPasswordCheck = () => {
    if ( inputValue.value.newPassword === '' ){
      inputSubmit.value.newPasswordSubmit = 0
      return
    }else if (inputValue.value.newPassword.length > 15){
      document.querySelector('.newPassword-check').innerHTML = '密码最多15位数'
      check.value.newPasswordCheck = true
      passwordSetTimeout() 
      inputSubmit.value.newPasswordSubmit = 0
      return
    }else if (!/^[a-zA-Z0-9]+$/g.test(inputValue.value.newPassword)){
      document.querySelector('.newPassword-check').innerHTML = '非法字符'
      check.value.newPasswordCheck = true
      passwordSetTimeout() 
      inputSubmit.value.newPasswordSubmit = 0
      return
    }else if (inputValue.value.newPassword.length < 6){
      document.querySelector('.newPassword-check').innerHTML = '密码最少6位数'
      check.value.newPasswordCheck = true
      passwordSetTimeout() 
      inputSubmit.value.newPasswordSubmit = 0
      return
    }
    inputSubmit.value.newPasswordSubmit = 1
  }
  const isShowIfpasswordCheck = () => {
    if ( inputValue.value.ifPassword === '' ){
      inputSubmit.value.ifPasswordSubmit = 0
      return
    }else if ( inputValue.value.ifPassword !== inputValue.value.newPassword ){
      document.querySelector('.ifPassword-check').innerHTML = '密码不一致'
      check.value.ifPasswordCheck = true
      ifpasswordSetTimeout()
      inputSubmit.value.ifPasswordSubmit = 0
      return
    }
    inputSubmit.value.ifPasswordSubmit = 1
  }

// 提交登录与注册
 //点击登录提交按钮
const tiJiaoLoginSubimt = async event => {
    event.preventDefault()
    // 先判断密码是不是空的，是的话执行返回
    if ( inputValue.value.password === '' ) {
      check.value.passwordCheck = true
      document.querySelector('.password-check').innerHTML = '密码不能为空'
      loginSetTimeout()
      console.log('是因为密码空返回的')
    return
    }
    // 再判断用户名是不是空，用户名是不是不合法，用户名长度是不是大于10，秘密是不是大于15小于6，只要有一个成立就执行
    else if (inputValue.value.username === '' || 
        !/^[a-zA-Z0-9-_]+$/g.test(inputValue.value.username ) ||
        inputValue.value.username.length >10 ||
        inputValue.value.password.length > 15 ||
        inputValue.value.password.length < 6
      ) {
        check.value.passwordCheck = true
        document.querySelector('.password-check').innerHTML = '账号或密码错误'
        loginSetTimeout()
        console.log('是因为校验不通过返回的')
        return
    }else {
      try{
      loading.value = true
      // 给isLogin一个值，不然不能请求服务器
      const loginPinia = useLoginPinia()
      loginPinia.isLogin = 1
      console.log('执行了我代表开始请求接口了')
      const res = await login(inputValue.value.username,inputValue.value.password)
      console.log('执行了我代表接口成功了')
      console.log('登陆成功',res)
      // 改ifLogin值，让他已经登录
      loginPinia.updateIsLogin(res.data.token)
      // 成功的弹出框
      alert(res.data.message)
      // 储存个人信息
      await xuanRanInformation()
      console.log('myInformationPinia.myInformation.value',myInformationPinia.myInformation.value)
      //跳转
      console.log('执行了我代表马上开始跳转了')
      loading.value = false
      router.push('./fenlei')
      console.log('执行了我代表已经跳转了')
      }
      catch(err){
      loading.value = false
      console.log('执行了我代表接口失败了')
      alert(err.data.message)
      // 打印接口失败的返回值
      console.log('这是接口失败的返回值',err)
      check.value.passwordCheck = true
      document.querySelector('.password-check').innerHTML = '账号或密码错误'
      loginSetTimeout()
      // 让isLogin为空，成未登录状态
      const loginPinia = useLoginPinia()
      loginPinia.updateIsLogin(null)
      }
      // 不管是接口成功还是失败，都能执行到这里
      // console.log('不管是接口成功还是失败，都能执行到这里')
      }
      // 不管是不是接口成功失败都会执行这里
      // 初始化文本
      inputValue.value.username = ''
      inputValue.value.password = ''
}
 //点击注册提交按钮
const tiJiaoSignUpSubmit = async ( event ) => {
  event.preventDefault()
  // 先校验，必须inputsubmit值都是1才能继续做判断
  if ( inputSubmit.value.signUpSubmit === 1 && inputSubmit.value.newPasswordSubmit === 1 && inputSubmit.value.ifPasswordSubmit === 1 ){
  try {
    loading.value = true 
    // 给isLogin一个值，不然不能请求服务器
    const loginPinia = useLoginPinia()
    loginPinia.isLogin = 1
    // 发送请求
    const res = await signUp( inputValue.value.signUp, inputValue.value.newPassword, inputValue.value.ifPassword )
    // 请求成功，把islogin值变成空
    loginPinia.updateIsLogin(null)
    // 打印注册信息
    console.log('新注册的账号和密码分别是',inputValue.value.signUp,inputValue.value.newPassword)
    loading.value = false
    // 跳转登陆界面
    updateIfDenglu()
    // 提示注册成功
    alert(res.data.message)
  }
  catch(err) {
    // 提示注册失败
    loading.value = false
    console.error("注册失败",err)
    // 弹出失败框
    alert(err.data.message)
    // 让isLogin为空，成未登录状态
    const loginPinia = useLoginPinia()
    loginPinia.updateIsLogin(null)
  }
  }
}

// 用来检查数据的按钮
// const btn = () => {
  // console.log(inputValue.value.ifPassword,document.querySelector('.bigbox'))
// }

</script>

<template>
  <!-- <div class="bigbox"> -->
    <div class="app"
    v-loading="loading"
    element-loading-text="拼命加载中..."
    element-loading-spinner="el-icon-circle-plus"
    element-loading-background="rgba(0, 0, 0, 0)"
    >
    <div class="left">
      <img src="../../../public/login.png" alt="">
    </div>
    <div class="right" id="right">
      <form action="" class="form-denglu" v-if="ifDenglu">
        <p class="dengLu">登录</p>
        <div class="username-box">
          <div class="username-span">用户名</div><input type="text" class="username" placeholder="请输入用户名..." v-model="inputValue.username">
        </div>
        <p class="username-check" v-show="check.usernameCheck">用户名错误xxxxxx</p>
        <div class="password-box">
          <div class="password-span">密码</div><input type="password" class="password" placeholder="请输入密码..." v-model="inputValue.password">
        </div>
        <p class="password-check" v-show="check.passwordCheck">密码错误xxxxx</p>
        <div class="submit">
          <button class="tiJiao" @click="tiJiaoLoginSubimt"><span>登</span><span>录</span></button>
        </div>
        <div class="goSignUp" @click="updateIfDenglu"><div class="quZhuCe">去注册-></div></div>
      </form>
      <form action="" v-else class="form-zhuce">
        <p class="signUp-top">注册</p>
        <div class="signUp-box">
          <div class="signUp-span">用户名</div><input type="text" @change="isShowSignUpCheck" class="signUp" placeholder="输入用户名..." v-model="inputValue.signUp">
        </div>
        <p class="signUp-check" v-show="check.signUpCheck">用户名错误xxxxxx</p>
        <div class="newPassword-box">
          <div class="newPassword-span">密码</div><input type="password" @change="isShowPasswordCheck" class="newPassword" placeholder="密码必须为6-12位数" v-model="inputValue.newPassword">
        </div>
        <p class="newPassword-check" v-show="check.newPasswordCheck">密码错误xxxxx</p>
        <div class="ifPassword-box">
          <div class="ifPassword-span">确认密码</div><input type="password" class="ifPassword" placeholder="再次输入密码" v-model="inputValue.ifPassword" @change="isShowIfpasswordCheck">
        </div>
        <p class="ifPassword-check" v-show="check.ifPasswordCheck">密码不一致xxxxxx</p>
        <div class="zhuCe-box">
          <button class="zhuCe" @click="tiJiaoSignUpSubmit"><span>注</span><span>册</span></button>
        </div>
        <div class="goLogin" @click="updateIfDenglu"><div class="quDengLu">去登录-></div></div>
      </form>
    </div>
    </div>
  <!-- </div> -->
  
</template>

<style scoped>
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  /* border: 1px solid black; */
}
.bigbox{
  margin: 0 auto;
  min-width: none;
  min-height: 1000px;
  width: 2000px;
  height: 100vh; /* 父盒子初始高度 */
  background-image: url('../../../public/city.png');
  background-size: cover; /* 铺满容器，等比例缩放并裁剪 */
  background-position: center; /* 居中显示（避免裁剪重要内容） */
  background-repeat: no-repeat; /* 禁止重复 */
}
.app{
  margin: 0 auto;
  /* width: 100vw;
  height: 100vh; */
  width: 1200px;
  height: 600px;
  /* height: 1200px; */
  display: flex;
}
.left{
  width: 600px;
  height: 600px;
  /* width: 50vw;
  height: 50vh; */
  /* background-color: yellowgreen; */
  /* border: 1px solid black; */
}
.left img {
  width: 100%;
  height: 100%;
  object-fit: contain;  /* 保持纵横比，完全包含在容器内 */
  object-position: center;  /* 居中显示（默认值） */
  border-radius: 40px;
  opacity: 0.6;
}
.right{
  width: 600px;
  height: 600px;
  /* border: 1px solid black; */
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-image: url('../../../public/city.png'); */
  border-radius: 0 20px 20px 0;
}
.form-denglu{
  width: 450px;
  height: 500px;
}
.form-zhuce{
  width: 450px;
  height: 600px;
  /* background-color: black; */
}
.dengLu,.signUp-top{
  width: 100%;
  height: 170px;
  font-size: 70px;
  display: block;
  line-height: 170px;
  /* background-color: aqua; */
}
.username-span,.signUp-span{
  font-size: 30px;
  height: 80px;
  line-height: 80px;
  width: 100px;
  line-height: 75px;
  text-align: left;
  text-indent: -8px;
  /* letter-spacing: -4px; */
}
.ifPassword-span{
  font-size: 30px;
  height: 80px;
  line-height: 80px;
  width: 100px;
  line-height: 75px;
  text-align: left;
  text-indent: -40px;
}
.username,.password,.signUp,.newPassword,.ifPassword{
  height: 40px;
  width: 350px;
  margin: auto;
  outline: none;      /* 取消聚焦时的轮廓线 */
  background: none !important; 
  font-size: 20px;
  /* border: 1px solid red; */
  /* box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); */
}
.username-box,.password-box,.signUp-box,.newPassword-box,.ifPassword-box{
  width: 100%;
  height: 80px;
  display: flex;
}
.username-check,.password-check,.signUp-check,.newPassword-check,.ifPassword-check{
  height: 20px;
  line-height: 0px;
  text-indent: 100px;
  color: red;
}
.password-span,.newPassword-span{
  font-size: 30px;
  height: 80px;
  line-height: 80px;
  width: 100px;
  line-height: 75px;
  text-align: left;
  letter-spacing: 18px; 
}
.submit,.zhuCe-box{
  height: 100px;
  width: 100%;
  display: flex;
}
.tiJiao,.zhuCe{
  margin: auto;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 50px;
  font-size: 30px;
  display: flex;
  justify-content: space-evenly;
  cursor: pointer;
  background-color: rgb(123, 186, 254);
  opacity: 1;
  border: none;
  border-radius: 30px;
}
.goSignUp,.goLogin{
  width: 100%;
  height: 30px;
  line-height: 30px;
  /* text-align: right;
  float: right; */
  display: flex;
  justify-content: right;
  /* border: 1px solid black; */
}
.quDengLu,.quZhuCe{
  /* width: 30px;
  height: 100%; */
  cursor: pointer;
  /* background-color: red; */
  /* border: 1px solid black; */
}
.quDengLu:hover,.quZhuCe:hover{
  opacity: 0.4;
  /* background-color: red; */
}
.zhuCe:hover,.tiJiao:hover{
  /* color: red; */
  opacity: 0.6;
}

</style>